<template>
	<view class="record-container">
		<view class="record-content">
			<x-skeleton type="text" :loading="loading" :configs="listConfigs">
				<view class="record-list" v-if="recordList.length">
					<view class="record-item" v-for="record in recordList" :key="record.id"
						@tap="handleToDetail(record)">
						<text class="record-title">{{ record.name }}</text>
						<text class="record-date">{{ record.birthday }}</text>
					</view>
				</view>
				<view v-else class="no-data">
					<text>暂无数据</text>
				</view>
			</x-skeleton>
		</view>
	</view>
</template>

<script>
	import {
		recordList
	} from '@/common/api_dailyinquiry.js'

	export default {
		data() {
			return {
				loading: true,
				recordList: [],
				listConfigs: {
					gridRows: 5,
				},
			}
		},
		onLoad() {
			this.getRecordList()
		},
		onShareAppMessage(res) {
			return {
				title: '国学八字，探究命格',
				path: 'subpage/twelvepattern/index',
				success(res) {
					uni.showToast({
						title: '分享成功'
					})
				},
				fail(res) {
					uni.showToast({
						title: '分享失败',
						icon: 'none'
					})
				}
			}
		},
		methods: {
			async getRecordList() {
				const res = await recordList()
				if (res.code === 200) {
					this.recordList = res.data
				}
				this.loading = false
			},
			handleToDetail(record) {
				uni.navigateTo({
					url: `/subpage/twelvepattern/discoveryresult?id=${record.id}`
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.record-container {
		width: 100%;
		min-height: 100vh;
		padding: 24rpx 32rpx 0;
		background-color: #FAF5FF;
		overflow: hidden;
		box-sizing: border-box;

		.record-content {
			position: relative;
			width: 100%;
			min-height: 100vh;
			padding-bottom: 50rpx;
			box-sizing: border-box;
			border-radius: 40rpx 40rpx 0px 0px;
			background-color: #fff;

			.record-list {
				width: 100%;
				padding: 24rpx 46rpx 0;
				box-sizing: border-box;

				.record-item {
					position: relative;
					display: flex;
					justify-content: space-between;
					padding: 32rpx 40rpx 32rpx 0;
					box-sizing: border-box;
					border-bottom: 2rpx solid rgba(52, 49, 79, 0.08);

					.record-title {
						font-weight: 400;
						font-size: 28rpx;
						color: #34314F;
					}

					.record-date {
						font-weight: 400;
						font-size: 28rpx;
						color: rgba(52, 49, 79, 0.4);
					}

					&::after {
						position: absolute;
						top: 50%;
						right: 0;
						display: block;
						width: 32rpx;
						height: 32rpx;
						transform: translateY(-50%);
						background: url('@/static/images/index/right-arrow.png') no-repeat center;
						background-size: 100% 100%;
						content: '';
					}
				}
			}

			.no-data {
				position: absolute;
				top: 40%;
				left: 50%;
				transform: translate(-50%, -50%);
				margin: 0;
			}
		}
	}
</style>